<template>
  <div v-loading="loadings" class="app-container">
    <!-- 报单用户信息 -->
    <h5 class="titleInfo">退款信息</h5>
    <div class="divTable">
      <el-form class="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="医院名称">{{ params.hospitalName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退款扣除杂费金额">{{ params.refundLeftAmount }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退款杂费金额">{{ params.refundOtherAmount }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-table :data="params.refundPayType" border>
            <el-table-column align="center" prop="payType" label="付款方式" />
            <el-table-column align="center" prop="refundAllPrice" label="流水单退款扣除杂费" />
            <el-table-column align="center" prop="refundFeePrice" label="流水单退款杂费" />
          </el-table>
        </el-row>
      </el-form>
    </div>
    <h5 class="titleInfo">报单用户信息</h5>
    <div class="divTable">
      <el-table :data="tableData1" border>
        <el-table-column align="center" prop="realname" label="姓名" />
        <el-table-column align="center" prop="username" label="电话" />
        <el-table-column align="center" prop="roleName" label="角色" />
        <el-table-column align="center" prop="refundCoin" label="退款提现积分" />
        <el-table-column align="center" prop="coin" label="提现积分余额" />
      </el-table>
    </div>
    <div class="divBar" />
    <!-- 奖励用户信息 -->
    <h5 class="titleInfo">奖励用户信息</h5>
    <div class="divTable">
      <el-table :data="tableData2" border>
        <el-table-column align="center" prop="realname" label="姓名" />
        <el-table-column align="center" prop="username" label="电话" />
        <el-table-column align="center" prop="roleName" label="角色" />
        <el-table-column align="center" prop="awardTypeName" label="退款类型" />
        <el-table-column align="center" prop="amount" label="退款金额" />
        <el-table-column align="center" prop="reward" label="账户奖励余额" />
      </el-table>
    </div>
    <div class="divBar" />
    <!-- 回款用户信息 -->
    <h5 class="titleInfo">回款用户信息</h5>
    <el-form ref="form"  :inline="true" :model="form" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="回款用户">
            <el-select v-model="rmForm.val" placeholder="请选择">
              <el-option
                v-for="(item,index) in rmValOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款金额">
            <el-input v-model="rmForm.returnMoney" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="退款完成">
            <el-select v-model="rmForm.refundType" placeholder="请选择">
              <el-option
                v-for="item in rmTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button style="margin-left:130px" type="primary" @click="submitFn()">立即提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { returnRefund, doReturnRefund } from "@/api/subsidyRefund";
export default {
  name: "SubsidyRefundRM",
  data() {
    return {
      loadings: true,
      params: {},
      form: {
        id: null
      },
      rmForm: {
        returnMoney: "",
        val: "",
        id: null,
        refundType: "0"
      },
      tableData1: [],
      tableData2: [],
      rmValOption: [],
      rmTypeOption: [
        {
          value: "1",
          label: "完成"
        },
        {
          value: "0",
          label: "未完成"
        }
      ]
    };
  },
  inject: ["reload"],
  mounted() {
    this.form.id = Number(this.$route.query.userId);
    this.rmForm.id = this.form.id;
    this.getList(this.form);
  },
  methods: {
    // 列表数据获取
    getList(e) {
      this.loadings = true;
      const datas = e;
      returnRefund(datas)
        .then(res => {
          this.loadings = false;
          // console.log(res)
          if (res.data.code == 0) {
            // console.log(res)
            this.params = res.data.data;
            const resData = res.data.data;
            this.tableData1 = [
              {
                realname: resData.realname,
                username: resData.username,
                roleName: resData.roleName,
                refundCoin: resData.refundCoin,
                coin: resData.coin
              }
            ];
            this.tableData2 = resData.rewardUsers;
            const newArr = [];
            resData.refundUsers.forEach(e => {
              newArr.push({
                value: e.val,
                label: e.name
              });
            });
            this.rmValOption = newArr;
            // console.log(newArr)
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.loadings = false;
          this.$message.error(error);
        });
    },
    // 立即提交
    submitFn() {
      this.loadings = true;
      console.log(this.rmForm);
      const datas = this.rmForm;
      doReturnRefund(datas)
        .then(res => {
          console.log(res);
          this.loadings = false;
          if (!res.data.code) {
            this.$message({
              showClose: true,
              message: "回款成功",
              type: "success"
            });
            this.$router.push({path:"/subsidyRefundIndex"});
            this.reload();
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
.divTable {
  padding: 0 20px 20px 20px;
}
</style>
